<template>
  <div class="dev">
    <div class="tree" :class="toggle?'sq-height':''" v-if="unTreeList && unTreeList.length">
      <el-row>
        <el-col :class="[isActive==index ? 'active' : '']" :span="4" v-for="(tree,index) in unTreeList" :key="tree.orderStageId">
          <el-link @click="eventTabTree(tree,index)" :underline="false"
          >{{ tree.taskStage }}<span v-if="conditions.dealType == 'DEAL'">{{ tree.orderCount }}</span>
            <!-- <el-popover trigger="click" placement="bottom" width="500px">
              <el-row>
                <el-col :span="4">
                  <el-tag style="margin: 3px 0; cursor: pointer;">子项列表数据结构待定</el-tag>
                </el-col>
              </el-row>
              <i slot="reference" class="el-icon-caret-right"></i>
            </el-popover> -->
          </el-link>
        </el-col>
      </el-row>
      <div @click="toggleChange" :class="toggle?'':'sq'" class="flex flex-center more">
      <!--  -->
      <div class="toggle-box">
        <p>{{ toggle?'展开':'收起' }}</p>
        <i class="iconfont icon-zhankai"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters, mapState } from "vuex";
import CustOrderService from "@/api/order/CustOrderService";
export default {
  name: "UniTreeInfo",
  data(){
    return {
      isActive:-1,
      toggle: false
    }
  },
  created() {
  },
  computed: {
    ...mapGetters(["conditions", "unTreeList"]),
  },
  methods: {
    //解构Vuex
    ...mapMutations("orders", ["SET_ORDERSTAGEID","SET_DEALTYPE","SET_QRYTYPE","SET_QRYVALUE"]),
    ...mapActions("orders", ["qryPendingOrderList", "clearQryConditions"]),

    /**
     * 选项的点击事件
     */
    eventTabTree(tree,index) {
      this.SET_DEALTYPE(this.conditions.dealType);
      this.SET_QRYTYPE(1);
      this.SET_QRYVALUE("");
      this.SET_ORDERSTAGEID(tree.orderStageId);
      this.isActive=index;
      this.qryPendingOrderList(this.conditions);
    },
    // 展开收起
    toggleChange(){
      this.toggle = !this.toggle;
    }
  },
};
</script>

<style lang="scss" scoped>
.dev {
  margin-top: 8px;
  color: #666;
  font-size: $fontSize_base;
  .tree {
    padding: .15rem .1rem .2rem .1rem;
    background-color: #fff;
    position: relative;
    &.sq-height{
      height: .5rem;
      overflow: hidden;
      .more{
       top: .15rem;
        width: 100%;
        background-color: rgba(255,255,255,.8);
      }
    }
    .more{
      width: 1rem;
      height: .3rem;
      position: absolute;
      top: .15rem;
      // left: 0;
      right: 0;
      margin: auto;
      cursor: pointer;
      color: $orange;
      &.sq{
        .iconfont{
          transform:rotate(180deg);
          -ms-transform:rotate(180deg); 	/* IE 9 */
          -moz-transform:rotate(180deg); 	/* Firefox */
          -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
          -o-transform:rotate(180deg); 	/* Opera */
        }
      }
      &:hover{
        p{
          //color: $blue;
          text-decoration: underline;
        }
      }
      .iconfont{
        font-size: .13rem;
        margin-left: .06rem;
      }
    }
    .el-col {
      padding: 5px 16px;
      span {
        color: $red;
        background:#fff5e6;
        border-radius: 0.1rem;
        border:1px solid #f1d8b4;
        margin-left: 0.1rem;
        font-size:0.12rem;
        padding: 0 0.1rem;


      }
    }
    .active{
      a{
        color: $orange;
      }
      span{
        color: $orange;
      }
    }
  }
}
.toggle-box{
  width:0.8rem;
  position: absolute;
  color:#0052d9;
  background:#eaf3fd;
  border-top-left-radius:0.2rem;
  border-bottom-left-radius:0.2rem;
  height:0.3rem;
  line-height:0.3rem;
  text-align:center;
  font-size:0.14rem;
    right: 0;
  p{
    display:inline
  }
}
</style>
